仔細想想自己從來沒有自己寫過完整的 To-Do List，趁著這個機會一邊複習一邊寫吧！明天是前端原生 JS～

今天不會附上 Code，只會給出頁面，讓有興趣的人自己試試看。如果能切出來，以試水溫來說，HTML, CSS 已經很夠用了 XD

前端原生畫面

利用 HTML, CSS 來繪製個大概的設計圖：

開發環境

• 新手直接 CodePen

開發流程

1. 寫出 HTML 架構，先不要管長相
2. CSS 讓他美觀

知識點

• HTML: index.html
  • 如何把 CSS 放到網站上？（CodePen 可跳過）
  • element 使用: <div>, <input>, <span>
• CSS:
  • CSS reset (Optional)（CodePen 可跳過，但也可設定）
  • 排版概念: display: flex
  • 想要有點空間感？padding, margin
• 圖片匯入：
  • 圖源是用 Google Material Icon
  • 匯入時是用相對檔案路徑：../parent_folder, ./current_folder
• 遇到問題嗚嗚嗚：
  • ChatGPT
  • W3Schools 是你入門的好朋友
  • YoutTube 影片跟著學 HTML, CSS
• 進階題
  • box-sizing
  • 讓刪除的垃圾桶 icon 放到最右邊
  • 可以參考以下開發環境配置：
    • VS Code
    • VS Code Extension: Live Server，即時把你的 Code 畫到網站上
    • Chrome Extension: Toggle Pesticide，可以看到 HTML element 區塊

參考資料：

• MDN Checkedbox
• ChatGPT：有請它幫我生 sample code, 小小 debug

心得：簡約風，是蠻常見的配置，技術方面看來自己又進步了，下手沒有什麼迷茫，只是語法記不得而已。本來想要直接進 React，但想到 React 更新蠻多，先 update 知識再來分享。（好想進 React 和 Node.js～）

若文中有資訊錯誤、偏頗，再煩請大大們指正，感謝大大們。也歡迎留言串門子：）